<script setup lang="ts">
  import useSetting from '@/store/modules/setting';

  const setting = useSetting();

  const gotoUrl = (url: string) => {
    window.open(url, '_blank');
  };
</script>

<template>
  <div class="tips">
    <div class="tips-text">未注册过{{ setting.title }}的手机号，我们将自动帮你注册手机号</div>
    <div class="tips-agreement">
      登录即代表你同意我们的
      <span
        v-for="(item, index) in setting.agreement"
        :key="item.title"
        class="agreement"
        @click="gotoUrl(item.agreementSrc)"
      >
        {{ item.title }}
        <span v-if="index !== setting.agreement.length - 1" class="agreement-separator">和</span>
      </span>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .tips {
    color: var(--text2);
    font-size: smaller; /* smaller */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .tips-text {
    margin-bottom: 10px;
  }

  .tips-agreement {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: medium; /* smaller */
  }

  .agreement {
    color: var(--brand_blue);
    cursor: pointer;
    margin-left: 4px;
  }

  .agreement-separator {
    color: #61666d;
    margin-left: 4px;
  }
</style>
